// rncs
import React, {Component} from 'react';
import {
  Text,
  StyleSheet,
  View,
  FlatList,
  Dimensions,
  TouchableOpacity,
  Image,
} from 'react-native';

const {width, height} = Dimensions.get('screen');

const rpx = x => (width / 750) * x;

export default class Main extends Component {
  data = [
    {title: '上架商品总数', desc: '+128%较上月', num: '24,380', color: 'blue'},
    {title: '注册用户总数', desc: '-50%较上月', num: '1,965', color: 'green'},
    {title: '上架商品总数', desc: '+128%较上月', num: '24,380', color: 'blue'},
    {title: '当日PC端PV量', desc: '-50%较昨日', num: '14,281', color: 'red'},
    {title: '移动端PV量', desc: '-34%较昨日', num: '29,315', color: 'green'},
    {title: 'App总下载量', desc: '+18%较上周', num: '7,422', color: 'blue'},
    // 对应页面下方的4个按钮
    // 本地图片写在数组中, 必须用 require 标识;  webpack会通过require 来识别依赖, 进而打包此图片文件
    {icon: require('../assets/menu_product.jpg'), title: '商品管理'},
    {icon: require('../assets/menu_user.jpg'), title: '用户管理'},
    {icon: require('../assets/menu_order.jpg'), title: '订单管理'},
    {icon: require('../assets/menu_heart.jpg'), title: '首页管理'},
  ];

  componentDidMount() {
    this.props.navigation.setOptions({
      headerRight: () => (
        <TouchableOpacity style={{marginRight: 15}}>
          <Image
            style={{width: 40, height: 40, borderRadius: 100}}
            source={require('../assets/user.png')}
          />
        </TouchableOpacity>
      ),
    });
  }

  render() {
    return (
      <FlatList
        data={this.data}
        keyExtractor={(item, index) => index + ''}
        renderItem={this._renderItem}
        numColumns={2}
        style={{backgroundColor: 'white'}}
      />
    );
  }

  // 自动遍历 数据数组中的每一项, 然后针对性的 给出对应的 UI界面
  _renderItem = ({item}) => {
    // 当前数组中, 有两种不同的数据结构
    // 如果 item中 含有 icon 属性的, 则呈现另一种样式
    if (item.icon) {
      return (
        <View style={{width: '50%', alignItems: 'center', paddingVertical: 15}}>
          <TouchableOpacity
            onPress={() => this.props.navigation.push('Products')}
            style={{alignItems: 'center'}}>
            <Image source={item.icon} />
            <Text style={{fontSize: rpx(40)}}>{item.title}</Text>
          </TouchableOpacity>
        </View>
      );
    }

    return (
      <View style={ss.cell}>
        <Text style={{fontSize: rpx(40)}}>{item.title}</Text>
        <Text style={[ss.cell_num, {color: item.color}]}>{item.num}</Text>
        <Text style={{fontSize: rpx(30)}}>{item.desc}</Text>
      </View>
    );
  };
}

const ss = StyleSheet.create({
  cell: {
    width: '50%',
    alignItems: 'center',
    padding: 10,
    borderBottomWidth: 1,
    borderRightWidth: 1,
  },
  cell_num: {fontSize: rpx(50), fontWeight: 'bold'},
});
